<template>
  <div class="record-page">
    <div class="record-list">
      <div
        class="record-item"
        v-for="item in records"
        :key="item.number + item.wdate"
      >
        <div class="record-left">
          <div class="record-platform">
            {{
              item.state == "sending"
                ? t("txsh")
                : item.state == "dismissed"
                  ? t("txsb")
                  : t("txwc")
            }}
          </div>
          <!-- <div class="record-id">{{ item.number }}</div> -->
          <div class="record-time">{{ item.wdate }}</div>
        </div>
        <div class="record-right">
          <div class="record-amount">COP{{ formatNumber(item.number) }}</div>
          <div class="record-tax">
            {{ t("withdrawalrecord_afterTax") }} COP{{
              formatNumber(item.lastnumber)
            }}
          </div>
        </div>
      </div>
      <NoData
        v-if="!loading && records.length === 0"
        :text="t('user-coupon_noData')"
      />
      <div v-if="loading" class="loading-container">
        <van-loading type="spinner" color="#f6eade" size="24px" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { showToast } from "vant";
import { useI18n } from "vue-i18n";
import { formatNumber } from "@/utils/public";
import { financeByType } from "@/api/user";
import NoData from "@/components/NoData.vue";

const { t } = useI18n();
const records = ref<any[]>([]);
const loading = ref(false);

const getWithdrawalRecords = async () => {
  try {
    loading.value = true;
    const res = await financeByType({
      type: "Withdrawal",
      page: "1",
      limit: "100",
    });
    if (res.code === 200 && Array.isArray(res.data)) {
      records.value = res.data;
    } else {
      showToast(res.msg || t("user-coupon_noData"));
    }
  } catch (e) {
    showToast(t("products_networkError"));
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  getWithdrawalRecords();
});
</script>

<style scoped>
.record-page {
  min-height: 100vh;
  overflow: hidden;
  padding: 0 0 0 0;
  margin-top: 16px;
  font-size: 15px;
  color: #f6eade;
  background: url("@/assets/images/login/topBg.png") no-repeat top;
  background-size: 100% auto;
}

.record-list {
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(254, 242, 230, 0) 10%,
    rgba(254, 237, 221, 0.1) 63%
  );
  border-top: 1px solid #f6eade;
  display: block;
  width: 100%;
  padding: 20px 15px;
  margin-bottom: 20px;
}

.record-item {
  padding: 10px 15px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(254, 242, 230, 0.1);
  border-radius: 10px;
  font-size: 10px;
  line-height: 1.2em;
  color: #f6eade;
  font-weight: 700;
  margin-bottom: 10px;
}

.record-left,
.record-right {
  position: relative;
  z-index: 1;
}

.record-platform {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6em;
  color: #f6eade;
  overflow: hidden;
  margin-bottom: 1px;
}

.record-id {
  font-size: 12px;
  color: rgba(246, 234, 222, 0.5);
  margin-bottom: 4px;
}

.record-time {
  font-size: 12px;
  color: rgba(246, 234, 222, 0.5);
}

.record-amount {
  font-size: 15px;
  font-weight: 700;
  display: inline-block;
  padding-right: 5px;
}

.record-tax {
  font-size: 12px;
  margin-top: 10px;
}
.loading-container,
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  color: #f6eade;
}
</style>
